﻿<Page
    x:Class="EPPlayer.CreateCharacter"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:EPPlayer"
    xmlns:ep="clr-namespace:EPPlayer"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    
    <Page.Resources>
        <local:ConvertColorToBrush x:Name="AttributeColorizer"/>
        <CollectionViewSource x:Name="allSkills" IsSourceGrouped="True"
        d:Source="{Binding Source={d:DesignInstance Type=ep:DemoValueAttributes, 
        IsDesignTimeCreatable=False}}"/>
        <CollectionViewSource x:Name="playSkills" IsSourceGrouped="True"/>
    </Page.Resources>

    <Page.BottomAppBar>
        <AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
            <Grid>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    <Button x:Name="bDelete" Style="{StaticResource DeleteAppBarButtonStyle}" Click="MenuSelected"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button x:Name="bHelp" Style="{StaticResource HelpAppBarButtonStyle}" Click="MenuSelected"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="26" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="210"/>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="210" />
        </Grid.ColumnDefinitions>

        <Border Width="3" Background="{StaticResource EPRed}" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Right"/>
        <Border Width="3" Background="{StaticResource EPRed}" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Right"/>

        <!-- this is the stats bar on the left -->
        <StackPanel x:Name="spCharacter" Grid.Column="0" Grid.Row="0" Margin="5">
            <TextBlock Style="{StaticResource HeaderTextStyle}">Values</TextBlock>

            <ItemsControl x:Name="gvStats" Margin="5,10,5,0" 
                          d:DataContext="{Binding Source={d:DesignInstance Type=ep:DemoValueAttributes, IsDesignTimeCreatable=False}}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="140"/>
                                <ColumnDefinition Width="50"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Style="{StaticResource AttributeTextStyle}" Text="{Binding name}" Foreground="{Binding Converter={StaticResource AttributeColorizer}}" Grid.Column="0"/>
                            <TextBlock Style="{StaticResource AttributeTextStyle}" Text="{Binding cookedValue}" Grid.Column="1"/>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

            <ItemsControl x:Name="gvRep" Margin="5,10,5,0">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="140"/>
                                <ColumnDefinition Width="50"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Style="{StaticResource AttributeTextStyle}" Text="{Binding name}" Foreground="{Binding Converter={StaticResource AttributeColorizer}}" Grid.Column="0"/>
                            <TextBlock Style="{StaticResource AttributeTextStyle}" Text="{Binding cookedValue}" Grid.Column="1"/>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>

        <!-- this is the stats bar on the right, showing aspects that don't have a value -->
        <StackPanel x:Name="spCharacterRight" Grid.Column="2" Grid.Row="0" Margin="5">
            <TextBlock Style="{StaticResource HeaderTextStyle}" HorizontalAlignment="Right">Aspects</TextBlock>
            <ItemsControl x:Name="gvAttachables" Margin="5,10,5,0"
                          d:DataContext="{Binding Source={d:DesignInstance Type=ep:DemoNonValueAttribute, IsDesignTimeCreatable=True}}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Style="{StaticResource AttributeTextStyle}" Text="{Binding name}" Foreground="{Binding Converter={StaticResource AttributeColorizer}}" Grid.Column="0"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>

        <!-- next few items are for the display at the bottom showing CP spent and creation rules validation numbers -->
        
        <StackPanel x:Name="spCost" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Orientation="Horizontal" Margin="5,-11,0,0" Background="DimGray">
            <TextBlock Style="{StaticResource ProminentTextStyle}">CP spent:</TextBlock>
            <TextBlock Style="{StaticResource ProminentTextStyle}" FontWeight="Bold" x:Name="BilledCP" Margin="10,0,0,0" Text="{Binding BilledCPCost}"/>
            <TextBlock Style="{StaticResource ProminentTextStyle}" Margin="10,0,0,0" Text="Points spent on active skills (min 400):"/>
            <TextBlock Style="{StaticResource ProminentTextStyle}" FontWeight="Bold" x:Name="BilledActiveSkills" Margin="10,0,0,0" Text="{Binding PointsInActiveSkills}"/>
            <TextBlock Style="{StaticResource ProminentTextStyle}" Margin="10,0,0,0" Text="Points spent on knowledge skills (min 300):"/>
            <TextBlock Style="{StaticResource ProminentTextStyle}" FontWeight="Bold" x:Name="BilledKnowlegdeSkills" Margin="10,0,0,0" Text="{Binding PointsInKnowledgeSkills}"/>
        </StackPanel>

        <StackPanel x:Name="spSummary" Grid.Column="1" Grid.Row="1"  Margin="5,5,5,5">
        </StackPanel>

        <!-- This is the giant flip view that takes up most of the screen. Each item in the flip view is a seperate screen. -->
        
        <FlipView x:Name="fvCreate" Grid.Row="0" Grid.Column="1" SelectionChanged="fvCreate_SelectionChanged" Margin="5,5,5,5">

            <!-- Faction -->
            <Grid x:Name="grFaction">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Text="Faction" Style="{StaticResource HeaderTextStyle}" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"/>
                <ListView
                    Grid.Row="1" Grid.Column="0"
                    x:Name="lvSelectFaction"
                    AutomationProperties.AutomationId="lvSelectFaction"
                    AutomationProperties.Name="Items"
                    TabIndex="1"
                    Margin="10"
                    IsSwipeEnabled="False"
                    SelectionChanged="FactionChanged">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Style="{StaticResource GroupHeaderTextStyle}" Margin="5,0" Text="{Binding name}" TextWrapping="NoWrap"/>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

                <!-- Details for selected item -->
                <ScrollViewer
                AutomationProperties.AutomationId="ItemDetailScrollViewer"
                DataContext="{Binding SelectedItem, ElementName=lvSelectFaction}"
                Style="{StaticResource VerticalScrollViewerStyle}"
                Margin="10"
                Grid.Row="1" Grid.Column="1">
                    <StackPanel x:Name="spFaction" Visibility="Collapsed">
                        <TextBlock Style="{StaticResource HeaderTextStyle}" Text="{Binding name}" />
                        <TextBlock Margin="0,10,0,0" Style="{StaticResource ProminentTextStyle}" Text="{Binding description}" TextWrapping="Wrap"/>
                        <TextBlock Style="{StaticResource SubHeaderTextStyle}" Margin="0,10,0,0">Advantages</TextBlock>
                        <TextBlock Style="{StaticResource ProminentTextStyle}" Text="{Binding advantages}" TextWrapping="Wrap"/>
                        <TextBlock Style="{StaticResource SubHeaderTextStyle}"  Margin="0,10,0,0">Disadvantages</TextBlock>
                        <TextBlock Style="{StaticResource ProminentTextStyle}" Text="{Binding disadvantages}" TextWrapping="Wrap"/>
                    </StackPanel>
                </ScrollViewer>
            </Grid>

            <!-- Background -->
            <Grid  x:Name="grBackground">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Margin="5,5" Text="Background" Style="{StaticResource HeaderTextStyle}" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"/>
                <ListView
                    Grid.Row="1" Grid.Column="0"
                    x:Name="lvSelectBackground"
                    AutomationProperties.AutomationId="lvSelectBackground"
                    AutomationProperties.Name="Items"
                    SelectionChanged="BackgroundChanged"
                    TabIndex="1"
                    Margin="10"
                    IsSwipeEnabled="False">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Style="{StaticResource GroupHeaderTextStyle}" Margin="5,0" Text="{Binding name}" TextWrapping="NoWrap"/>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

                <!-- Details for selected item -->
                <ScrollViewer
                AutomationProperties.AutomationId="ItemDetailScrollViewer"
                DataContext="{Binding SelectedItem, ElementName=lvSelectBackground}"
                Style="{StaticResource VerticalScrollViewerStyle}"
                Grid.Row="1" Grid.Column="1"
                Margin="10">
                    <StackPanel x:Name="spBackground"  Visibility="Collapsed">
                        <TextBlock Style="{StaticResource HeaderTextStyle}" Text="{Binding name}" />
                        <TextBlock Margin="0,10,0,0" Style="{StaticResource ProminentTextStyle}" Text="{Binding description}" TextWrapping="Wrap"/>
                        <TextBlock Style="{StaticResource SubHeaderTextStyle}" Margin="0,10,0,0">Advantages</TextBlock>
                        <TextBlock Style="{StaticResource ProminentTextStyle}" Text="{Binding advantages}" TextWrapping="Wrap"/>
                        <TextBlock Style="{StaticResource SubHeaderTextStyle}"  Margin="0,10,0,0">Disadvantages</TextBlock>
                        <TextBlock Style="{StaticResource ProminentTextStyle}" Text="{Binding disadvantages}" TextWrapping="Wrap"/>
                    </StackPanel>
                </ScrollViewer>
            </Grid>

            <!-- Morph -->
            <Grid x:Name="grMorph">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Margin="5,5" Text="Morph" Style="{StaticResource HeaderTextStyle}" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"/>
                <ScrollViewer Grid.Row="1" Grid.Column="0">
                <ListView
                    x:Name="lvSelectMorph"
                    AutomationProperties.AutomationId="lvSelectMorph"
                    AutomationProperties.Name="Items"
                    SelectionChanged="MorphChanged"
                    TabIndex="1"
                    Margin="10"
                    IsSwipeEnabled="True">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                                <TextBlock Margin="5,0" Text="{Binding name}" Style="{StaticResource GroupHeaderTextStyle}" TextWrapping="NoWrap"/>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                </ScrollViewer>
                
                <!-- Details for selected item -->
                <ScrollViewer
                AutomationProperties.AutomationId="ItemDetailScrollViewer"
                DataContext="{Binding SelectedItem, ElementName=lvSelectMorph}"
                Style="{StaticResource VerticalScrollViewerStyle}"
                Grid.Row="1" Grid.Column="1"
                Margin="10">
                    <StackPanel x:Name="spMorph" Visibility="Collapsed">
                        <TextBlock Style="{StaticResource HeaderTextStyle}" Text="{Binding name}" />
                        <TextBlock Margin="0,10,0,0" Style="{StaticResource ProminentTextStyle}" Text="{Binding description}" TextWrapping="Wrap"/>
                        <TextBlock Style="{StaticResource SubHeaderTextStyle}" Margin="0,10,0,0">Advantages</TextBlock>
                        <TextBlock Style="{StaticResource ProminentTextStyle}" Text="{Binding advantages}" TextWrapping="Wrap"/>
                        <TextBlock Style="{StaticResource SubHeaderTextStyle}" Margin="0,10,0,0">Disadvantages</TextBlock>
                        <TextBlock Style="{StaticResource ProminentTextStyle}" Text="{Binding disadvantages}" TextWrapping="Wrap"/>
                    </StackPanel>
                </ScrollViewer>
            </Grid>

            <!-- Aptitudes -->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Margin="5,5" Text="Aptitudes" Style="{StaticResource HeaderTextStyle}" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"/>
                <ListView
                Grid.Row="1" Grid.Column="0"
                x:Name="lvSelectAptitudes"
                AutomationProperties.AutomationId="lvSelectAptitudes"
                AutomationProperties.Name="Items"
                SelectionChanged="AptitdudeChanged"
                TabIndex="1"
                Margin="10"
                IsSwipeEnabled="True">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Margin="5,0" Text="{Binding name}" Style="{StaticResource GroupHeaderTextStyle}" TextWrapping="NoWrap"/>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

                <!-- Details for selected item -->
                <ScrollViewer
                AutomationProperties.AutomationId="ItemDetailScrollViewer"
                DataContext="{Binding SelectedItem, ElementName=lvSelectAptitudes}"
                Style="{StaticResource VerticalScrollViewerStyle}"
                Grid.Row="1" Grid.Column="1"
                Margin="10">
                    <StackPanel Orientation="Vertical" HorizontalAlignment="Left" x:Name="spAptitudeDetail" Visibility="Collapsed">
                        <TextBlock Style="{StaticResource HeaderTextStyle}" Text="{Binding name}" />
                        <TextBlock Margin="0,10,0,0" Style="{StaticResource ProminentTextStyle}" Text="{Binding description}" TextWrapping="Wrap"/>
                        <TextBlock x:Name="tbSkillsForAptitude" Margin="0,10,0,0" Style="{StaticResource ProminentTextStyle}" TextWrapping="Wrap"/>
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,8,0,0">
                            <Slider x:Name="slAptitude" Value="{Binding Mode=TwoWay, Path=rawValue}" Minimum="0" Maximum="30" StepFrequency="5" Width="300"/>
                            <TextBlock Margin="10,0,0,0" Text="{Binding cookedValue}" Style="{StaticResource ProminentTextStyle}"/>
                        </StackPanel>
                    </StackPanel>
                </ScrollViewer>
            </Grid>
            
            <!-- Positive Traits -->
            <Grid x:Name="grTraits1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Margin="5,5" Text="Traits (positive)" Style="{StaticResource HeaderTextStyle}" Grid.Row="0" />
                <GridView x:Name="gvTraits" SelectionMode="Multiple" SelectionChanged="CommonNonValueAttributeChanged" Grid.Row="1" Margin="0,10,0,0">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="230"/>
                                    <ColumnDefinition Width="62"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="30"/>
                                    <RowDefinition Height="150"/>
                                </Grid.RowDefinitions>
                                <TextBlock Grid.Column="0" Grid.Row="0" Margin="4,0" Text="{Binding name}" Style="{StaticResource ItemHeaderTextStyle}"/>
                                <TextBlock Grid.Column="1" Grid.Row="0" Margin="0,0,26,0" Text="{Binding cpCost}" Style="{StaticResource ItemHeaderTextStyle}"/>
                                <TextBlock Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Margin="5" 
                                           Text="{Binding description}" TextWrapping="Wrap" TextTrimming="WordEllipsis"
                                           Style="{StaticResource ItemTextTextStyle}"/>
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </Grid>
            <!-- Negative Traits -->
            <Grid x:Name="grTraits2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Margin="5,5" Text="Traits (negative)" Style="{StaticResource HeaderTextStyle}" Grid.Row="0" />
                <GridView x:Name="gvTraits2" SelectionMode="Multiple" SelectionChanged="CommonNonValueAttributeChanged" Grid.Row="1" Margin="0,10,0,0">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="230"/>
                                    <ColumnDefinition Width="62"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="30"/>
                                    <RowDefinition Height="150"/>
                                </Grid.RowDefinitions>
                                <TextBlock Grid.Column="0" Grid.Row="0" Margin="4,0" Text="{Binding name}" Style="{StaticResource ItemHeaderTextStyle}"/>
                                <TextBlock Grid.Column="1" Grid.Row="0" Margin="0,0,26,0" Text="{Binding cpCost}" Style="{StaticResource ItemHeaderTextStyle}"/>
                                <TextBlock Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Margin="5" 
                                           Text="{Binding description}" TextWrapping="Wrap" TextTrimming="WordEllipsis"
                                           Style="{StaticResource ItemTextTextStyle}"/>
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </Grid>

             <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Margin="5,5" Text="Reputation" Style="{StaticResource HeaderTextStyle}" Grid.Row="0"/>
                <GridView x:Name="gvRepEdit" SelectionMode="None" Grid.Row="1" Margin="0,16,0,0">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <local:SkillControl DataContext="{Binding}">
                            </local:SkillControl>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </Grid>
            <!--
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Margin="5,5" Text="Fighting skills" Style="{StaticResource HeaderTextStyle}" Grid.Row="0"/>
                <GridView x:Name="gvSkills1" SelectionMode="None" Grid.Row="1" Margin="0,16,0,0">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <local:SkillControl DataContext="{Binding}">
                            </local:SkillControl>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </Grid>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Margin="5,5" Text="Action skills" Style="{StaticResource HeaderTextStyle}" Grid.Row="0" />
                <GridView x:Name="gvSkills2" SelectionMode="None" Grid.Row="1" Margin="0,16,0,0">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <local:SkillControl DataContext="{Binding}">
                            </local:SkillControl>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </Grid>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Margin="5,5" Text="Moving skills" Style="{StaticResource HeaderTextStyle}" Grid.Row="0" />
                <GridView x:Name="gvSkills3" SelectionMode="None" Grid.Row="1" Margin="0,16,0,0">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <local:SkillControl DataContext="{Binding}">
                            </local:SkillControl>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </Grid>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Margin="5,5" Text="Conversation skills" Style="{StaticResource HeaderTextStyle}" Grid.Row="0" />
                <GridView x:Name="gvSkills4" SelectionMode="None" Grid.Row="1" Margin="0,16,0,0">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <local:SkillControl DataContext="{Binding}">
                            </local:SkillControl>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </Grid>
            -->
            <!-- all skills master edit zoom zoom -->
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Margin="5,5" Text="All skills" Style="{StaticResource HeaderTextStyle}" Grid.Row="0" />
                
                <SemanticZoom IsZoomedInViewActive="False" IsZoomOutButtonEnabled="True"
                              x:Name="szSkills" Grid.Row="1">
                <SemanticZoom.ZoomedOutView>
                    <GridView x:Name="gvFieldSkillsZoomedOut" Foreground="White" 
                        ScrollViewer.IsHorizontalScrollChainingEnabled="False">
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <StackPanel>
                                <TextBlock Width="320" Height="64" Margin="10,18,0,0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
                                    Text="{Binding Group.Key}"
                                    Style="{StaticResource HeaderTextStyle}"/>
                                </StackPanel>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                    </GridView>
                </SemanticZoom.ZoomedOutView>

                <SemanticZoom.ZoomedInView>
                    <GridView x:Name="gvFieldSkillsZoomedIn" SelectionMode="None" Grid.Row="1" Margin="0,16,0,0"
                        ItemsSource="{Binding Source={StaticResource allSkills}}">
                        <GridView.GroupStyle>
                            <GroupStyle>
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Key}" Foreground="{StaticResource ApplicationForegroundThemeBrush}" Margin="5" FontSize="32" FontFamily="Segoe UI Light" />
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>
                                <GroupStyle.Panel>
                                    <ItemsPanelTemplate>
                                        <VariableSizedWrapGrid Orientation="Vertical"/>
                                    </ItemsPanelTemplate>
                                </GroupStyle.Panel>
                            </GroupStyle>
                        </GridView.GroupStyle>
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal"/>
                                </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <local:SkillControl DataContext="{Binding}">
                                </local:SkillControl>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                    </GridView>
                </SemanticZoom.ZoomedInView>
            </SemanticZoom>
            </Grid>

            <Grid x:Name="grArmor">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Margin="5,5" Text="Armor" Style="{StaticResource HeaderTextStyle}" Grid.Row="0"/>
                <GridView x:Name="gvArmor" SelectionMode="Single" Grid.Row="1" Margin="0,16,0,0" SelectionChanged="CommonNonValueAttributeChanged">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <local:ItemControl DataContext="{Binding}">
                            </local:ItemControl>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </Grid>
            <Grid x:Name="grArmorMod">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Margin="5,5" Text="Armor mods and accessories" Style="{StaticResource HeaderTextStyle}" Grid.Row="0"/>
                <GridView x:Name="gvArmorMod" SelectionMode="Multiple" Grid.Row="1" Margin="0,16,0,0" SelectionChanged="CommonNonValueAttributeChanged">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <local:ItemControl DataContext="{Binding}">
                            </local:ItemControl>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </Grid>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Text="Augmentation" Style="{StaticResource HeaderTextStyle}" Grid.Row="0"/>
                <GridView x:Name="gvItems1" SelectionMode="Multiple" Grid.Row="1" Margin="0,16,0,0" SelectionChanged="CommonNonValueAttributeChanged">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <local:ItemControl DataContext="{Binding}">
                            </local:ItemControl>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </Grid>
            <Grid x:Name="grGear">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Margin="5,5" Text="Gear" Style="{StaticResource HeaderTextStyle}" Grid.Row="0"/>
                <GridView x:Name="gvItems2" SelectionMode="Multiple" Grid.Row="1" Margin="0,16,0,0" SelectionChanged="CommonNonValueAttributeChanged">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <local:ItemControl DataContext="{Binding}">
                            </local:ItemControl>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </Grid>

            <!-- play screen -->
            <Grid  x:Name="grPlay">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Margin="5,5" Text="Play!" Style="{StaticResource HeaderTextStyle}" Grid.Row="0" />

                <SemanticZoom IsZoomedInViewActive="False" IsZoomOutButtonEnabled="True"
                              x:Name="szPlay" Grid.Row="1">
                    <SemanticZoom.ZoomedOutView>
                        <GridView x:Name="gvPlayZoomedOut" Foreground="White" 
                        ScrollViewer.IsHorizontalScrollChainingEnabled="False">
                            <GridView.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel>
                                        <TextBlock Width="320" Height="64" Margin="10,18,0,0" VerticalAlignment="Center" HorizontalAlignment="Center"
                                        Text="{Binding Group.Key}"
                                        Style="{StaticResource HeaderTextStyle}"/>
                                    </StackPanel>
                                </DataTemplate>
                            </GridView.ItemTemplate>
                        </GridView>
                    </SemanticZoom.ZoomedOutView>

                    <SemanticZoom.ZoomedInView>
                        <GridView x:Name="gvPlayZoomedIn" SelectionMode="None" Grid.Row="1" Margin="0,16,0,0"
                        ItemsSource="{Binding Source={StaticResource playSkills}}">
                            <GridView.GroupStyle>
                                <GroupStyle HidesIfEmpty="True">
                                    <GroupStyle.HeaderTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding Key}" Foreground="{StaticResource ApplicationForegroundThemeBrush}" Margin="5" Style="{StaticResource HeaderTextStyle}" />
                                        </DataTemplate>
                                    </GroupStyle.HeaderTemplate>
                                    <GroupStyle.Panel>
                                        <ItemsPanelTemplate>
                                            <VariableSizedWrapGrid Orientation="Vertical"/>
                                        </ItemsPanelTemplate>
                                    </GroupStyle.Panel>
                                </GroupStyle>
                            </GridView.GroupStyle>
                            <GridView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal"/>
                                </ItemsPanelTemplate>
                            </GridView.ItemsPanel>
                            <GridView.ItemTemplate>
                                <DataTemplate>
                                    <local:SkillPlayButton DataContext="{Binding}">
                                    </local:SkillPlayButton>
                                </DataTemplate>
                            </GridView.ItemTemplate>
                        </GridView>
                    </SemanticZoom.ZoomedInView>
                </SemanticZoom>
            </Grid>

        </FlipView>
    </Grid>
</Page>